<template>
  <div class="form">
    <!-- 表单 -->
    <el-form
      ref="formRef"
      class="form-content"
      label-position="top"
      :model="formData"
      status-icon
      :rules="formRules"
    >
      <!-- 用户名 -->
      <el-form-item label="" prop="mobile">
        <el-input
          v-model.trim="formData.mobile"
          maxlength="11"
          size="large"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <!-- 密码 -->
      <el-form-item label="" prop="code">
        <VerificationCode
          :value="formData.code"
          :mobile="formData.mobile"
          @input="inputHandle"
        />
      </el-form-item>
      <!-- 记住密码 忘记密码？ -->
      <el-form-item>
        <div class="form-change">
          <el-text
            class="forget-password"
            type="primary"
            @click="forgetPassword"
          >
            忘记密码？
          </el-text>
        </div>
      </el-form-item>
      <!-- 登录 -->
      <el-form-item>
        <el-button
          class="form-button"
          color="#626aef"
          size="large"
          :loading="loading"
          @click.prevent="login"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
// components
import VerificationCode from '@/components/VerificationCode/index.vue'
// hooks
import useAsync from '@/hooks/useAsync'
// apis
import { codeLogin } from '@/api/common'
// others
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { validatePhoneNumber } from '@/utils/is'
import cache from '@/utils/cache'

// stores
import useUserStore from '@/stores/user'
const user = useUserStore()
// routes
const router = useRouter()
const route = useRoute()

// el-form
const formRef = ref()
const formData = reactive({
  mobile: '15688888888',
  code: 'admin1',
  device: 'PC'
})
const validateMobile = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入手机号'))
  } else {
    if (!validatePhoneNumber(value)) {
      callback(new Error('请输入正确的手机号'))
    } else {
      callback()
    }
  }
}
const formRules = reactive({
  mobile: [{ required: true, validator: validateMobile, trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})

// loading
const { loading, doResult } = useAsync({ init: false, request: codeLogin })

// login
const login = async () => {
  const res = await doResult({ ...formData })
  if (res?.errno === 0) {
    user.setLoginInfo(res.data)
    cache.set('loginInfo', res.data)
    await user.getUserInfoFun()
    const redirect = route.query.redirect || '/home'
    router.push(redirect)
  }
}
// forget
const forgetPassword = () => {}
const inputHandle = (val) => {
  formData.value.code = val
}
</script>

<style lang="less" scoped>
.form-change {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.forget-password {
  cursor: pointer;
}
.form-button {
  width: 100%;
  & + .form-button {
    margin-left: 0;
    margin-top: 20px;
  }
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}
</style>
